
<template>

  <div>
    
    <el-form :inline="true" :model="formInline" class="search">
      <el-form-item label="ip：">
        <el-input  placeholder="请输入ip" v-model="From.ip" @input="change($event)"></el-input>
      </el-form-item>
      <el-form-item label="oid">
        <el-input  placeholder="请输入oid" v-model="From.oid" @input="change($event)"></el-input>
      </el-form-item>
      <el-form-item label="community：">
        <el-input  placeholder="请输入community" v-model="From.community" @input="change($event)"></el-input>
      </el-form-item>
      <el-form-item label="version：">
        <el-input  placeholder="请输入version" v-model="From.version" @input="change($event)"></el-input>
      </el-form-item>

    <el-form-item>
      <el-button type="primary" @click="mibshow">获取snmp信息</el-button>
    </el-form-item>
      
<el-button type="primary" @click="dialogFormVisible = true">添加设备</el-button>
    <el-dialog title="添加设备" :visible.sync="dialogFormVisible">
  <el-form :model="form">
    <el-form-item label="IP地址" :label-width="formLabelWidth">
      <el-input v-model="IPSET.ip" autocomplete="off"></el-input>
    </el-form-item>
  </el-form>
  <div slot="footer" class="dialog-footer">
    <el-button @click="dialogFormVisible = false">取 消</el-button>
    <el-button type="primary" @click="add">确 定</el-button>
  </div>
</el-dialog>


  
    </el-form>
    <!--列表-->
    <el-table
      size="small"
      :data="data"
      highlight-current-row
      v-loading="loading"
      border
      element-loading-text="拼命加载中"
      style="width: 100%;"
    >
      
      
      <el-table-column
        sortable
        prop="oid"
        label="Name/oid"
        width="200"
        show-overflow-tooltip
      >
      </el-table-column>
      <el-table-column
        sortable
        prop="value"
        label="值"
        width="328"
        show-overflow-tooltip
      >
      </el-table-column>
      <el-table-column
        sortable
        prop="type"
        label="设备类型"
        width="216"
        show-overflow-tooltip
      >
      </el-table-column>
      <el-table-column
        sortable
        prop="ip"
        label="ip地址"
        width="321"
        show-overflow-tooltip
      >
      </el-table-column>
    
      
      <el-table-column align="center" label="操作" min-width="200">
        <template slot-scope="scope">
          <el-button size="mini" @click="updata(scope.$index, scope.row)"
            >修改</el-button
          >
        </template>
      </el-table-column>
    </el-table>
    <!-- 分页组件 -->
    <Pagination
      v-bind:child-msg="pageparm"
      @callFather="callFather"
    ></Pagination>
    <!-- 编辑界面 -->
    <el-dialog
      :title="title"
      :visible.sync="editFormVisible"
      width="50%"
      @click="closeDialog('editForm')"
    >
      <el-form label-width="120px" :model="editForm" ref="editForm">
        <el-row>
          <el-col :span="120">
            <el-form-item label="ID">
              <el-input
                size="small"
                v-model="SnmpSet.ip"
                placeholder="请输入IP"
              ></el-input>
            </el-form-item>
            <el-form-item label="oid">
              <el-input
                size="small"
                v-model="SnmpSet.oid"
                placeholder="请输入oid"
              ></el-input>
            </el-form-item>
            <el-form-item label="值"> 
              <el-input
                size="small"
                v-model="SnmpSet.message"
                placeholder="请输入值"
              ></el-input>
            </el-form-item>
            <el-form-item label="团体字">
              <el-input
                size="small"
                v-model="SnmpSet.community"
                auto-complete="off"
                placeholder="请输入团体字"
              ></el-input>
            </el-form-item>
             <el-form-item label="版本号">
              <el-input
                size="small"
                v-model="SnmpSet.version"
                auto-complete="off"
                placeholder="请输入版本号"
              ></el-input>
            </el-form-item>
            <el-button @click="setsnmp()">确定</el-button>  
          </el-col>
        </el-row>
      </el-form>
    </el-dialog>

</div>

  
</template>

<script>
import Pagination from "../../components/Pagination";
import axios from 'axios'
export default {
  data() {
    return {

      loading: false, //是显示加载
      editFormVisible: false, //控制编辑页面显示与隐藏
      title: "修改",
      editForm: {
        id: "",
        oid: "",
        value: "",
        type: "",
        ipaddress: "",
        community: "",

        token: localStorage.getItem("logintoken")
      },
      dialogFormVisible: false,
      data:[],
      From: {
                   ip: "",
                   oid: "",
                   community:"",
                   version:""
                },
      IPSET:{
        ip: ""
      },
      SnmpSet: {
                ip:"",
   	            oid:"",
   	            community:"",
                version:"",
                message:""
                },
      formInline: {
        page: 1,
        limit: 10,
        id: "",
        oid: "",
        transId: "",
        value: "",
        type: "",
        ipaddress: "",
        // community: "",
        token: localStorage.getItem("logintoken")
      },
      listData:[],

      // 分页参数
      pageparm: {
        currentPage: 1,
        pageSize: 10,
        total: ""
      }
    };
  },

  // 注册组件
  components: {
    Pagination
  },
  /**
   * 数据发生改变
   */

  /**
   * 创建完毕
   */
  created() {
    this.getdata(this.formInline);
  },

 

  /**
   * 里面的方法只有被调用才会执行
   */
  methods: {
      change(e){
    this.$forceUpdate()
  },
    // 获取mib列表
    getdata(parameter) {
      //this.loading = true;
      // 模拟数据开始
      let res = {
        code: 0,
        msg: null,
        count: "",
        data: [
          {
            ID: "",
            ip: "",
            oid: "",
            type: "",
            value: "",
            version:"",
            community: ""
          }
        ]
      };
      this.loading = false;
      this.listData = res.data;
      this.pageparm.currentPage = this.formInline.page;
      this.pageparm.pageSize = this.formInline.limit;
      this.pageparm.total = res.count;
    
      


    },
    mibshow(){
      // this.getRequest("/device/select").

      //this.postRequest('/monitor/doLogin',this.loginForm)
       axios.post('/mib/getMib',{
        ip:this.From.ip,
        oid:this.From.oid,
        community:this.From.community,
        version:this.From.version})
        // this.postRequest('/mib/getMib',formInline)
        .then(res => {
          //this.loading = false
          
            this.data=res.data
            // this.listData=res
            console.log(this.data)
            console.log(this.data[0].id)
            console.log(res.status)
            // 分页赋值
            this.pageparm.currentPage = this.formInline.page
            this.pageparm.pageSize = this.formInline.limit
            this.pageparm.total = res.count
            this.getdata(this.formInline)
            //  this.getdata(this.listData);
          
        })
    },
    //添加设备
    add(){
      axios.post('/config/add',{
       ip:this.IPSET.ip,
      }).then(res =>{
        if(res.status==10000)
         this.$message.success('添加成功');
        this.closeModel();
      }
      
      )
    },
    // 分页插件事件
    callFather(parm) {
      this.formInline.page = parm.currentPage;
      this.formInline.limit = parm.pageSize;
      this.getdata(this.formInline);
    },
    // 搜索事件
    search(searchdata) {
     return this.data.filter(item =>{
            if(editForm.ID==searchdata){
              return item
            }
          })
    },//setsnmp事件
    setsnmp(){
      
    axios.post('/mib/setMib',{
        ip:this.SnmpSet.ip,
        oid:this.SnmpSet.oid,
        community:this.SnmpSet.community,
        version:this.SnmpSet.version,
        message:this.SnmpSet.message
        })
        // this.postRequest('/mib/getMib',formInline)
        .then(res =>{
          if(res.status==10000){
         this.$message.success('修改成功');
          }
        this.closeModal();
      }
      
      )
    },
    //显示编辑界面
    updata: function(index, row) {
      this.editFormVisible = true;
      this.editForm = row;
    },
    //修改事件
  

    // 编辑、增加页面保存方法
    // // 删除公司
    // deleteUser(index, row) {
    //   this.$confirm("确定要删除吗?", "信息", {
    //     confirmButtonText: "确定",
    //     cancelButtonText: "取消",
    //     type: "warning"
    //   })
    //     .then(() => {
    //       ConfigDelete(row.deptId)
    //         .then(res => {
    //           if (res.success) {
    //             this.$message({
    //               type: "success",
    //               message: "公司已删除!"
    //             });
    //             this.getdata(this.formInline);
    //           } else {
    //             this.$message({
    //               type: "info",
    //               message: res.msg
    //             });
    //           }
    //         })
    //         .catch(err => {
    //           this.loading = false;
    //           this.$message.error("支付配置信息删除失败，请稍后再试！");
    //         });
    //     })
    //     .catch(() => {
    //       this.$message({
    //         type: "info",
    //         message: "已取消删除"
    //       });
    //     });
    // },
    // 关闭编辑、增加弹出框
    closeDialog(formName) {

      this.editFormVisible = false;
      this.$refs[formName].resetFields();
    }
  }
};
</script>

<style scoped>
.user-search {
  margin-top: 10px;
}
.userRole {
  width: 100%;
}



</style>
